import React, { useEffect, useState } from 'react'; // 导入React和hooks
import { Table, Card, Tag } from 'antd'; // 只保留表格和卡片

const CategoryManagement = () => {
  const [products, setProducts] = useState([]); // 商品数据
  const [loading, setLoading] = useState(true); // 加载状态

  // 获取商品数据
  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true); // 开始加载
      const res = await fetch('http://localhost:3001/api/products'); // 请求后端API
      const data = await res.json(); // 解析数据
      setProducts(data); // 设置商品数据
      setLoading(false); // 结束加载
    };
    fetchProducts();
  }, []);

  // 表格列
  const columns = [
    { title: '商品名称', dataIndex: 'name', key: 'name' },
    { title: '分类', dataIndex: 'category', key: 'category' },
    { title: '单价', dataIndex: 'price', key: 'price', render: v => `¥${v}` },
    { title: '库存', dataIndex: 'stock', key: 'stock' },
    { title: '今日销量', dataIndex: 'todaySales', key: 'todaySales', render: v => <Tag color="blue">{v}</Tag> }
  ];

  return (
    <Card title="商品管理">
      <Table
        columns={columns}
        dataSource={products}
        rowKey="_id"
        loading={loading}
        pagination={{ pageSize: 10 }}
      />
    </Card>
  );
};

export default CategoryManagement; // 导出页面 